@import "_mixin.scss";
$hovercolor:#ff9400;
header { border-bottom: 1px solid #efefef; padding: 22px 0; position: absolute; left: 0;top: 0; z-index: 99; width: 100%; 
	.wrap { margin: 0 (80%/1920*100);  position: relative; animation-delay: .5s;}
	.logo {
		width: 109px; margin-top: 6px; img {width: 100%;}
	}
	nav { float: left;
		> ul > li { float: left; margin:0 (28vw/1920*100); position: relative;
			> a { display: inline-block; line-height: 45px;}
			&.active { 
				>a {color: $hovercolor;}
			}
			&:hover {
				> a {color: $hovercolor;}
				.dropdown { opacity: 1; visibility: visible; top: 100%;}
			}
		}
		.dropdown { position: absolute; top: calc(100% - 20px); left: 0; white-space: nowrap;  transition: all .5s; opacity: 0; visibility: hidden;
			ul {background-color: #fff; padding:20px; box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.2); border-radius: 0 30px 0 30px; margin-top: 25px;}
			a {display: block; padding: 5px 0;}
		}
	}
	
	.language {
		position: relative; transition: all .5s;
		> a {display: inline-block; padding: 0 32px; line-height: 42px; border-radius: 24px;text-align: center; background-color: #fff; border: 1px solid $hovercolor;}
		.dropdown {
			position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; border: 1px solid $hovercolor; border-top: none;  border-radius: 0 0 24px 24px;transition: all .5s; opacity: 0; visibility: hidden; transform: translateY(-20px);
			a {display: block; text-align: center; padding: 10px;}
		}
		&:hover {
			a {border-radius: 24px 24px 0 0; border-bottom: none;}
			.dropdown {opacity: 1;visibility: visible; transform: translateY(0);}
		}
	}
	.searchbox { margin-left: 14px;
		a { position: relative; display: block; width: 48px; height: 48px; border-radius: 100%;border: 1px solid $hovercolor;  color: #000;
			i {@include translateCenter;}
		}
		a:hover {background-color: $hovercolor; color: #fff;}
	}
	.menu {
	  --color: #333;width: 34px;height: 34px;padding: 0;margin: 0;outline: none;position: relative;border: none;background: none;cursor: pointer;-webkit-appearence: none;-webkit-tap-highlight-color: transparent; display: none;
	}
	.menu svg {
	  width: 34px;height: 34px;top: -7px;left: -12px;stroke: var(--color);stroke-width: 2px;stroke-linecap: round;stroke-linejoin: round;fill: none;display: block; border: 1px solid $hovercolor; border-radius: 50%;
	}
	.menu svg path {
	  transition: stroke-dasharray var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s), stroke-dashoffset var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s);
	  stroke-dasharray: var(--array-1, 26px) var(--array-2, 100px);
	  stroke-dashoffset: var(--offset, 126px);
	  -webkit-transform: translateZ(0);
	          transform: translateZ(0);
	}
	.menu svg path:nth-child(2) {
	  --duration: .7s;--easing: ease-in;--offset: 100px;--array-2: 74px;
	}
	.menu svg path:nth-child(3) {
	  --offset: 133px;
	  --array-2: 107px;
	}
	.menu.active svg path {
	  --offset: 57px;
	}
	.menu.active svg path:nth-child(1), .menu.active svg path:nth-child(3) {
	  --delay: .15s;
	  --easing: cubic-bezier(.2, .4, .2, 1.1);
	}
	.menu.active svg path:nth-child(2) {
	  --duration: .4s;
	  --offset: 2px;
	  --array-1: 1px;
	}
	.menu.active svg path:nth-child(3) {
	  --offset: 58px;
	}
}
@media only screen and (max-width:1024px){
	body {overflow-x: hidden;}
	header { padding: 10px 0;}
	header .logo {width: 80px;}
	header nav { display: none; float: none; position: absolute; left: -4.16667%; top: 55px; background-color: #fff; z-index: 9; height: calc(100vh - 55px); width: 100vw; overflow-y: auto;
		> ul {display: block; padding: 0 4.16667%;	
		 > li { display: block; float: none; width: 100%; margin: 0; padding: 10px 0 10px 0; text-align: left; -webkit-animation-duration: 0.5s;animation-duration: 0.5s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: returnToNormal;animation-name: returnToNormal; border-bottom: 1px solid rgba($color: #2d2d2d, $alpha: 0.1);
			> a { margin-right: 20px; display: block; position: relative;
				&:after { content: "\e6b9";font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased; position: absolute; right: 0;top: 0; transition: all .5s;}
			}
			&:first-child >a:after {display: none;}
			&.active {
				> a:after {
					transform: rotate(180deg);
				}
			}
			&:first-child h2:after {display: none;}
		}
		}
		
		.dropdown {
			position: static; transform: none!important;  width: 100%; left: 0; white-space: normal;display: none; transition: none;  opacity: 1; transition: none; visibility: visible;
			ul {box-shadow: none; margin-top: 0;}
			a { display: block;}
		}
	}
	header .language { position: relative; z-index: 10;}
	header .language > a { padding: 0 20px; line-height: 30px; border-radius: 15px;}
	header .searchbox a {width: 34px; height: 34px; i {font-size: 14px;}}
	header .menu {display: block; border-radius: 50%; margin-left: 14px;}
}
.banner {
	position: relative; overflow: hidden; height: 100vh; 
	.swiper-banner { width: 100%; height: 100%; overflow: hidden;
		img {width: 100%; height: 100%; object-fit: cover;}
	}
	.swiper-slide { position: relative; width: 100%; height: 100%; background: url(../../img/paizhi-official/banner_bg.png) 0 0 /cover no-repeat;}
	.banner-circle {
		height: (1885vw/1920*100); width: (1885vw/1920*100); position: absolute; left: (486vw/1920*100); bottom: -(248vw/1920*100); border-radius: 50%; overflow: hidden; 
		img { width: (1446%/1920*100); height: (1341%/1920*100); position: absolute; left: 0; bottom: 0;}
		&:after {
			content: ''; display: block;width: 100%; height: 100%; position: absolute; left: 50%; top: 50%;  border-radius: 50%; transform: translate(-50%,-50%); transition: width 1.5s ease .3s,height 1.5s ease .3s,box-shadow 2s cubic-bezier(0.36, -0.15, 0.2, 1) 0s; box-shadow: inset 0 0 0 (1885vw/1920*100) #fff; -moz-box-shadow: inset 0 0 0 (1885vw/1920*100) #fff; -webkit-box-shadow: inset 0 0 0 (1885vw/1920*100) #fff;
		}
	}
	.swiper-slide-active {
		.banner-circle:after {transform: translate(-50%,-50%) ; box-shadow: inset 0 0 0 0 #fff;}
	}
	.inner-mask {position: absolute; left: 0;top: 0; height: 100%; width: 100%; z-index: 5; border-radius: 50%; 
		.txt { @include translateCenter; 
			h1 {font-size: 72px; line-height: 1.2; font-family: "Montserrat-Bold"; text-transform: uppercase;}
		}
		.line {overflow: hidden;}
		.down { margin-top: 2%; position: relative; width: 76px; height: 76px;
			.down-wrap {display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: url(../../img/paizhi-official/icon_down_wrap.png) 0 0/cover no-repeat; top: 0; left: 0; animation: rotate 2s ;}
			a { display: block; width: 100%; height: 100%;border-radius: 50%;  text-align: center; line-height: 76px; position: relative; z-index: 2; color: $hovercolor;
				i { font-size: 32px;}
				.icon {animation:floatUpDown 2s linear infinite;}
			}
		}
	}
	.swiper-pagination { position: absolute; left: (80%/1920*100); bottom: 3%; z-index: 9;}
	.swiper-pagination-bullet {width: 60px; height: 3px; border-radius: 0; background-color: #bfbfbf;margin: 0 10px; opacity: 1;}
	.swiper-pagination-bullet-active { background-color: $hovercolor;}
}
@media screen and (min-width:0\0) {//针对IE
	.banner .banner-circle:after {box-shadow: none;}
	.banner .swiper-banner img {height: auto; object-fit: inherit;}
}
@media only screen and (min-width:2000px){
	.banner .banner-circle { bottom: -20vw; left: 26.8vw;}
}
@media only screen and (max-width:1780px){
	.banner .banner-circle { bottom: -9vw;}
}
@media only screen and (max-width:1440px){
	.banner .banner-circle { left: 26.5vw;}
	.banner .swiper-banner img {}
	/* .banner .inner-mask {display: none;} */
	.banner .inner-mask .txt h1 {font-size: 60px;}
	
}
@media only screen and (max-width:1440px) and (max-height:700px){
	.banner { height: 60vw;}
}
@media only screen and (max-width:1280px) {
	.banner .inner-mask .txt{ width: 90%;}
	.banner { height: 59vw;}
}
@media only screen and (max-width:1024px) {
	.banner .swiper-pagination-bullet {width: 30px; margin: 0 5px;}
	.banner .inner-mask .txt h1 {font-size: 46px;}
	.banner .inner-mask .down {width: 60px; height: 60px;}
	.banner .inner-mask .down a {line-height: 60px;}
	.banner .inner-mask .down a i {font-size: 20px;}
	.banner .inner-mask .txt { margin-left: 0;}
}
@media only screen and (max-width:768px) {
	.banner .inner-mask .txt h1 {font-size: 36px;}
	.banner .inner-mask .down {width: 50px; height: 50px;}
	.banner .inner-mask .down a {line-height: 50px;}
	.banner .inner-mask .down a i {font-size: 16px;}
	.banner .inner-mask .txt { top: 60%;}
}
@media only screen and (max-width:540px) {
	.banner { height: 72vw;}
	.banner .inner-mask .txt h1 {font-size: 26px;}
	.banner .inner-mask .down {width: 40px; height: 40px;}
	.banner .inner-mask .down a {line-height: 40px;}
}
/* Battery solutions */
.index-Battery {
	position: relative; margin-top: 20px; background-color: #eaeaec; padding: 180px 0 200px;
	.Battery-bg {
		position: absolute; left: -100%; top: 0; height: 100%; width: 100%; transition: all 2s cubic-bezier(0.36, -0.15, 0.2, 1); z-index: 0;
		img {width: 100%; height: 100%; object-fit: cover;}
		&.animated { left: 0;}
	}
	.inner { position: relative; z-index: 2;}
	.fl { width: (675%/1440*100);}
	.more-btn {margin-top: 30px;}
	.title { margin-bottom: 20px;
		h1 {font-family: "Montserrat-Bold";text-transform: uppercase; margin-bottom: 20px;}
		p {color: #666; line-height: 24px;}
	}
	.product-items {
		position: relative; transform: translateZ(0);
		&:before {content: ''; display: block; width: 1px; height: 100%;position: absolute; left: 118px; top: 0; background-color: #d2d3d4;}
		li { position: relative; margin-bottom: 20px;
			&:before {content: ''; display: block; width: 12px; height: 12px;border-radius: 50%; background-color: #fff; border: 2px solid #c2c2c2; transition: all .5s; @include translateYCenter; left: 118px; margin-left: -8px;}
			
			h2 { float: left; margin-left: 48px; display: inline-block; margin-top: 20px; font-weight: normal;}
			&.active {
				&:before { border: 4px solid $hovercolor; margin-left: -10px;}
				.icon {
					.nr {display: none;}
					.hv {display: inline-block;}
				}
				h2 {color: $hovercolor;}
			}
			&:hover {
				&:before { border: 4px solid $hovercolor; margin-left: -10px;}
			}
		}
		.icon { width: 100px; float: left; img {width: 100%;}
			.nr {display: inline-block;}
			.hv {display: none;}
		}
	}
	
	.fr {
		margin-top: 70px; width: (592%/1440*100); position: relative; img {width: 100%;}
		.Battery-container {position: relative; width: 100%;
			.name { position: absolute;top: 100%; width: 100%; left: 0;text-align: center; padding: 20px 0;}
		}
		.product {width: (458%/592*100); height: (458%/592*100);  @include translateCenter;
			&::before {content: ''; display: block; width: 100%; height: 100%; background-color: #fff;box-shadow: 0px 5px 36px 0px rgba(0, 0, 0, 0.03); border-radius: 50%; transition: all 1s; transform: scale(.5);}
			.img{ width: (478%/458*100); position: absolute; left: -(10%/458*100); bottom: 0; transform: scale(.5);transition: all 1s; }
			.img.animated { transform: scale(1);}
			&.animated::before { transform: scale(1);}			
		}
	}
	.power-dc { @include translateCenter; width: (72%/458*100); top: 62%;
		.dc{opacity: 0;}
		.ms-txt { position: absolute; color: $hovercolor; width: 100%;height: 100%; bottom: calc(100% + 5px); left: 20%;
			.dot {width: 7px;height: 7px;border: 1px solid #fff; background-color: $hovercolor; border-radius: 50%; position: absolute; left: 50%; margin-left: -4px; bottom: 0;opacity: 0; transition: all 1s;}
			.line1 {  width: 0%;height: 1px;border-top: 1px solid $hovercolor;transform: rotate(-65deg);position: absolute;bottom: 4px;left: 50%;transform-origin: 0% 0%;  }
			.line2 {  width: 0%;height: 1px;border-top: 1px solid $hovercolor;position: absolute;bottom: 50%;left: 84%;transform-origin: 0% 0%;  }
			.txt { position: absolute; bottom: 54%; left: 100%; white-space: nowrap;
				p {width: 0; transition: all 1s; transition-delay: 1.5s; overflow: hidden;}
			}
		}
		&.animated {
			.dc {animation: img 1.5s linear .5s  forwards;}
			.dot { animation: img 1.5s linear .5s  forwards;}
			.line1 {animation: line1 .4s linear 1s  forwards;}
			.line2 { animation: line2 .4s linear 1.5s  forwards;}
			.txt p {animation: line0 .4s linear 1.5s  forwards;}
		}
	}
	.product-box > div {
		&.on  {
			.dc {animation: img 1.5s linear .5s  forwards;}
			.dot { animation: img 1.5s linear .5s  forwards;}
			.line1 {animation: line1 .4s linear 1s  forwards;}
			.line2 { animation: line2 .4s linear 1.5s  forwards;}
			.txt p {animation: line0 .4s linear 1.5s  forwards;}
		}
	}
	.product3 {
		.power-dc {
			width: (35%/458*100); top: 62%; left: 46%;
			.ms-txt {
				.line1 {bottom: 4px;left: 50%;}
				.line2 {bottom: 45%;left: 84%;}
			}			
		}
		
	}
	.product4 {
		.power-dc {
			width: (72%/458*100); top: 62%;
			.ms-txt {
				.line1 {bottom: 4px;left: 50%;}
				.line2 {bottom: 54%;left: 84%;}
			}
		}
		
	}
	.product1 {
		.power-dc {
			width: (72%/458*100); top: 62%;
			.ms-txt {
				.line1 {bottom: 4px;left: 50%;}
				.line2 {bottom: 54%;left: 84%;}
			}
		}
		
	}
	.product2 {
		.power-dc {
			width: (52%/458*100); top: 72%;
			.ms-txt {
				.line1 {bottom: 4px;left: 50%;}
				.line2 {bottom: 56%;left: 84%;}
			}
			
		}
		
	}
	.product-select {
		li {position: absolute;
			&:first-child { right: -13px; top: -(116%/592*100); width: (136%/592*100); height: (136%/592*100);	}
			&:nth-child(2) { left: (548%/592*100); top: (416%/592*100); width: (189%/592*100); height: (189%/592*100);}
			&:nth-child(3) { right: (609%/592*100); top: (180%/592*100);width: (164%/592*100); height: (164%/592*100);}
			.img-sm { border-radius: 50%; background-color: #fff; overflow: hidden; @include img100;}
			.name {text-align: center; font-size: 14px; color: #666; padding: 10px 0;}
			a:hover {
				.img-sm img {transform: scale(1.05);}
			}
		}
	}
}
@media only screen and (max-width:1800px){
	.index-Battery .fr { margin-right: 5%;}
	.index-Battery .product-select li:nth-child(2) { left: auto; right: -15%; top: 85%;}
}
@media only screen and (max-width:1440px){
	.index-Battery .product-select li:nth-child(2) { left: auto; right: -15%; top: 85%;}
}
@media only screen and (max-width:1280px){
	.index-Battery .fr { margin-right: 10%;}
}
@media only screen and (max-width:1024px){
	.index-Battery { padding: 90px 0 150px;}
	.index-Battery .product-items li {margin-bottom: 10px;}
	.index-Battery .product-items:before { left: 108px;}
	.index-Battery .product-items li:before {left: 108px;}
	.index-Battery .product-items .icon {width: 90px;}
	.index-Battery .product-items li h2 {margin-left: 38px;}
}
@media only screen and (max-width:768px) {
	.index-Battery .fl {width: 100%; float: none;}
	.index-Battery .more-btn {text-align: center;}
	.index-Battery .fr {width: 70%; float: none; margin: 100px auto;}
	.index-Battery .title {text-align: center;}
	.index-Battery .product-items:before { left: 50%;}
	.index-Battery .product-items li:before {left: 50%;}
	.index-Battery .product-items .icon {width: 50%; text-align: right; img {width: 70px; margin-right: 20px;}}
	.index-Battery .product-items li h2 {  margin-top: 13px; width: 50%; margin-left: 0; padding-left: 30px;}
}
@media only screen and (max-width:540px){
	.index-Battery .product-select { margin-top: 100px;}
	.index-Battery .product-select li {position: static; float: left;}
	.index-Battery .product-select li:first-child {width: 30%; height: 30%;}
	.index-Battery .product-select li:nth-child(2) {width: 30%; height: 30%; margin: 0 5%;}
	.index-Battery .product-select li:nth-child(3) {width: 30%; height: 30%;}
	.index-Battery .fr {width: 100%;}
}
.more-btn {
	a {position: relative; transform: translateZ(0); width: 192px; line-height: 54px;display: inline-block; text-align: center;
		&:before {content: ''; display: block; width: 80%; height: 100%;position: absolute; left: 0;top: 0; transition: all 1s; background-color: #fff; border-radius: 27px; z-index: -2;}
		&:after {content: ''; display: block; width: 100%; height: 100%;position: absolute; left: 0;top: 0; transition: all 1s; background: linear-gradient(-54deg, #ee8f35, #f6cb45); border-radius: 27px; z-index: -1; opacity: 0; visibility: hidden;}
		i {font-size: 18px;}
		&.animated:before { width: 100%;}
	}
	a:hover { color: #fff;
		&:after { width: 100%; opacity: 1; visibility: visible;}
	}
}
@media only screen and (max-width:1024px){
	.more-btn a {width: 150px; height: 45px; line-height: 45px;}
}
.index-aboutpytes {
	background: url(../../img/paizhi-official/index_bg3.jpg) center center /cover no-repeat; position: relative; overflow: hidden; padding: 300px 0 330px; text-align: center; overflow: hidden;
	.video { position: absolute; left: 0; width: 98%; top: 120px; bottom: 145px;z-index: 0; }
	.inner { position: relative;z-index: 2;}
	.title { text-transform: uppercase; font-family: "Montserrat-Bold";}
	.text { margin-top: 124px; margin-bottom: 130px;
		li {width: 30.33%;  float: left;
			.num {
				position: relative; display: inline-block;
				b { font-size: 110px; line-height: 1;
					&.txt-gradient {}
				}
				span { position: absolute; left: 100%; top: 0;}
			}
			p {color: #666; padding: 0 20%; margin-top: 20px;}
			&:nth-child(2) {width: 39.33%;}
		}
	}
}
@media only screen and (max-width:1440px){
	.index-aboutpytes .video { width: 80%; left: 10%;}
	.index-aboutpytes .text li .num b {font-size: 90px;}
}
@media only screen and (max-width:1440px)  and (min-width:1300px){
	.index-aboutpytes  {padding-bottom: 200px;}
	.index-aboutpytes .video { width: 80%; left: 8%; top: 20%; bottom: 10%;}
	.index-aboutpytes .text li .num b {font-size: 90px;}
	.index-aboutpytes .more-btn { position: relative; top: -100px;}
}
@media only screen and (max-width:1280px){
	.index-aboutpytes .text { margin: 90px 0 100px;}
	.index-aboutpytes .video { width: 70%; left: 12%;}
	.index-aboutpytes .text li .num b {font-size: 80px;}
	.index-aboutpytes .more-btn { position: relative; top: -60px;}
}
@media only screen and (max-width:1024px){
	.index-aboutpytes { padding: 150px 0 160px;}
	.index-aboutpytes .text li .num b {font-size: 70px;}
	.index-aboutpytes .text { margin-bottom: 150px;}
	// .index-aboutpytes .video { bottom: auto; top: 50%; left: 50%; transform: translate(-50%,-50%);  width: 60%; height: 70%;}
	.index-aboutpytes .video {width: 80%; left: 8%;}
	.index-aboutpytes .more-btn { position: relative; top: -120px;}
}
@media only screen and (max-width:768px){
	.index-aboutpytes .text li .num b {font-size: 50px;}
	.index-aboutpytes .video {top: 10%; bottom: 0;width: 100%; transform: none; left: -5%; height: 80%;}
	
}
@media only screen and (max-width:540px) {
	.index-aboutpytes .text { margin: 50px 0 60px;}
	.index-aboutpytes .text li {float: none;width: 100%; }
	.index-aboutpytes .text li:nth-child(2) {width: 100%; margin: 60px 0;}
	.index-aboutpytes .video { width: 100%;height: 35%; left: auto; top: 30%; bottom: auto;}
	.index-aboutpytes .more-btn { position: relative; top: 0;}
}
.index-Technical {
	background: url(../../img/paizhi-official/index_bg4.jpg) center center /cover no-repeat; position: relative; transform: translateZ(0); padding: 170px 0; margin-top: 20px; overflow: hidden;
	.bg { position: absolute; top: 0; height: 100%; width: 100%; left: 0; z-index: -1; img {width: 100%; height: 100%;}}
	.title {
		text-align: center; margin-bottom: 50px;
		h1 { text-transform: uppercase; font-family: "Montserrat-Bold";}
	}
	ul { margin: 0 -15px 0 -15px;
		li { float: left;width: 25%; padding: 10px 15px;
			a {display: block;border-radius: 0 30px 0 30px; overflow: hidden; position: relative;}
			.img { @include img100;}
			.text { position: absolute; left: 0; top: 0; height: 100%; padding: 30px 25px; transform: translateZ(0); transition: all .5s;
				&:before {content: ''; display: block; width: 100%; height: 197px; background-color: #f5f5f5; transition: all .5s;z-index: -2; position: absolute; left: 0; top: 0;}
				&:after {content: ''; display: block; width: 100%; height: 100%; background: url(../../img/paizhi-official/bg_support.png) center 0 /100% no-repeat;  transition: all 1s;z-index: -1; position: absolute; left: 0; top: 0; opacity: 0;}
				i {display: block; width: 37px; height: 37px; background-size: cover; margin-bottom: 10px;}
				.icon-1 { background-image: url(../../img/paizhi-official/icon_support01.png);}
				.icon-2 { background-image: url(../../img/paizhi-official/icon_support02.png);}
				.icon-3 { background-image: url(../../img/paizhi-official/icon_support03.png);}
				.icon-4 { background-image: url(../../img/paizhi-official/icon_support04.png);}
			}
			h2 {font-family: "Montserrat-Bold"; margin-bottom: 10px;}
			p {@include slcss3(2); height: 48px; color: #666; line-height: (24/16);}
			&:hover {
				.img img{transform: scale(1.05);}
				.text { color: #fff;
					&:before { height: 0;}
					&:after { opacity: 1;}
					p {color: #fff; height: auto;-webkit-line-clamp: 20;}
					.icon-1 { background-image: url(../../img/paizhi-official/icon_support01_hover.png);}
					.icon-2 { background-image: url(../../img/paizhi-official/icon_support02_hover.png);}
					.icon-3 { background-image: url(../../img/paizhi-official/icon_support03_hover.png);}
					.icon-4 { background-image: url(../../img/paizhi-official/icon_support04_hover.png);}
				}
			}
		}
	}
	.more-btn {text-align: center; margin-top: 60px;}
}

.index-NewsCenter {
	margin-top: 20px;padding: 166px 0 100px; background: url(../../img/paizhi-official/index_bg5.jpg) center center /cover no-repeat; overflow: hidden;
	.title {
		text-align: center; margin-bottom: 45px;
		h1 { text-transform: uppercase; font-family: "Montserrat-Bold";}
	}
	ul { margin: 0 -15px;
		li { padding: 10px 15px; float: left;width: 33.33%;
			&:not(.text-news) { 
				a {display: block; background-color: #fff; border-radius: 0 30px 0 30px; overflow: hidden;}
				.img { height: 312px; @include img100;}
			}
			.text { padding: 28px 8% 40px; background-color: #fff; height: 282px;
				.datetime { font-size: 14px; margin-bottom: 10px; color: #333;}
				h2 {@include slcss3(3); max-height: 100px;  font-family: "Montserrat-Bold"; line-height: (30/20);  }
				p {@include slcss3(2); height: 64px; color: #666;border-top: 1px solid #fff4e5;  margin-top: 15px; padding-top: 15px;}
			}
			.box { margin-bottom: 30px; border-radius: 0 30px 0 30px; overflow: hidden;
				&:last-child { margin-bottom: 0;}
			}
			a:hover {
				.img img {transform: scale(1.05);}
			}
		}
	}
	.more-btn { margin-top: 40px; text-align: center;}
}
@media only screen and (max-width:1024px){
	.index-Technical { padding: 100px 0;}
}
@media only screen and (max-width:768px) {
	.index-Technical .title {margin-bottom: 25px;}
	.index-NewsCenter .title {margin-bottom: 25px;}
	.index-Technical ul li {width: 50%;}
	.index-NewsCenter ul li {width: 50%;}
	.index-NewsCenter ul li:last-child {width: 100%;}
	.index-NewsCenter ul li:not(.text-news) .img {height: 172px;}
	.index-NewsCenter ul li .text {height: auto;}
	.index-NewsCenter ul li .box {margin-bottom: 20px;}
}
@media only screen and (max-width:540px){
	.index-Technical ul li {width: 100%;}
	.index-NewsCenter ul li {width: 100%;}
	
}
footer {
	background: url(../../img/paizhi-official/banner_bg.png) center cneter /cover no-repeat;
	.inner {margin: 0 (80%/1920*100);}
	.hd { padding: 145px 0 24px;}
	.lt {float: left;}
	.md {float: left;}
	.rt {float: right;}
	.hd {
		.lt {width: (332%/1760*100);
			.logo { width: 109px; margin-bottom: 20px; img {width: 100%;}}
			.txt { line-height: (30/14); font-size: 14px;color: #666;}
		}
		.md { width: (1172%/1760*100);  margin:0 0 0 (56%/1760*100);}
		nav {
			> ul > li { float: left; margin: 0 3%;}
		}
		.rt { width: (140%/1760*100);
			.img {width: 100%; img { width: 100%;}}
			p {text-align: center; text-transform: uppercase; font-size: 14px; line-height: 1.3; padding: 10px 0;}
		}
		.dropdown { margin-top: 10px; 
			ul {
				li {font-size: 14px; padding: 10px 0; line-height: 1.3; a {color: #666;}
					a:hover {color: $hovercolor;}
				}
			}
		}
	}
	.bd { font-size: 14px;color: #999; padding-bottom: 23px;
		a {color: #999;}
		a:hover {color: $hovercolor;}
	}
	.share {
		a {display: inline-block; margin: 0 10px;
			&:last-child { margin-right: 0;}
			i {display: inline-block; width: 28px; height: 23px; background: url(../../img/paizhi-official/share.png) no-repeat;}
			.con-wx { background-position: 0 0;}
			.con-wx2 { background-position: -50px 0; width: 22px;}
			.con-fc { background-position: -94px 0; width: 23px;}
			.con-Yt { background-position: -138px 0; width: 22px;}
			.con-in { background-position: -182px 0; width: 24px;}
			&:hover {
				.con-wx { background-position: 0 -23px;}
				.con-wx2 { background-position: -50px -23px;}
				.con-fc { background-position: -94px -23px;}
				.con-Yt { background-position: -138px -23px; }
				.con-in { background-position: -182px -23px; }
			}
		}
	}
	.ft { border-top: 1px solid #e0e0e0; padding: 20px 0 50px; color: #999;font-size: 14px;
		a {color: #999;}
		a:hover {color: $hovercolor;}
	}
}
.goTopBtn { display: block;position: fixed; width: 65px; height: 65px; border-radius: 50%; right: 10px; bottom: 10%; z-index: 9; color: #333; border: 1px solid #333; i { font-size: 26px;@include translateCenter;}
	&:hover {
		background: linear-gradient(-54deg, #ee8f35, #f6cb45); color: #fff; border: none;
	}
}
@media only screen and (max-width:1800px) {
	footer .hd nav > ul > li {margin: 0 2%;}
}
@media only screen and (max-width:1600px) {
	footer .hd nav > ul > li {margin: 0 1%;}
}
@media only screen and (max-width:1440px) {
	footer .hd nav > ul > li {margin: 0 ; width: 20%; padding: 0 10px;}
}
@media only screen and (max-width:1024px) {
	footer .hd {padding-top: 70px;}
	.goTopBtn {width: 50px; height: 50px;}
}
@media only screen and (max-width:768px)  {
	footer .lt {float: none;}
	footer .hd .lt {width: 100%; text-align: center; margin-bottom: 20px;}
	footer .hd .lt .logo {margin: 0 auto;}
	footer .md {float: none;}
	footer .hd .md {width: 100%;}
	footer .rt {float: none;}
	footer .hd .rt {width: 100px; margin: 20px auto 0;}
	footer .bd {text-align: center; .lt {margin-bottom: 20px;}}
	footer .ft {text-align: center;}
	footer .hd nav > ul {text-align: center;}
	footer .hd nav > ul > li {float: none;display: inline-block; margin: 0 10px; width: auto; padding: 0;}
	footer .hd .dropdown {display: none;}
	.goTopBtn {width: 40px; height: 40px; i {font-size: 18px;}}
}